@charset "UTF-8";
@import url(./base.less);

@head_height: 80px;
@head_title_height: 50px;
@head_menu_height: 30px;
@foot_height: 50px;
@body_bg: @gray_44;
@a_color: @gray_e6;
@body_right: 240px;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100vh;
  width: 100vw;
  background: @body_bg;
  overflow: hidden;
}
a {
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  color: @a_color;
  transition: all 0.3s;
  &:hover {
    text-decoration: none;
    color: @white;
  }
}
ul {
  margin: 0;
  list-style: none;
}
input{
    outline: none;
    &[type="number"] {
        -moz-appearance: textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }
    &::-webkit-outer-spin-button,&::-webkit-inner-spin-button {
        -webkit-appearance: none;
     }
}
.float-right{
    float:right;
}
.clearfix{
  clear: both;
  &::after{
    content: "";
    clear: both;
  }
  &::before{
    content: "";
    clear: both;
  }
}
.hasScroll {
  overflow: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    border-radius: 7px;
    background-color: @green_light;
  }
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    background-color: @green_light;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 6px;
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
    background-color: @green;
  }
}
.head_modal {
  height: calc(@head_title_height + @head_menu_height + 3px);
  .head_1 {
    margin: 0;
    height: @head_title_height;
    line-height: @head_title_height;
  }
  .head_2 {
    margin: 0;
    height: @head_menu_height;
    line-height: @head_menu_height;
    position: relative;
  }
  .head_left {
    a {
      &.logo {
        height: 40px;
        line-height: 40px;
        margin-right: 40px;
      }
      &.link {
        line-height: 15px;
        padding: 0 20px;
        border-left: 1px solid @gray_d6;
      }
    }
  }
  .head_right {
    > li {
      display: inline-block;
      color: @gray_d6;
      padding: 0 5px;
      margin-left: 15px;
      cursor: pointer;
      position: relative;
      &:hover {
        color: @white;
      }
      &.head_set {
        .iconfont {
          display: inline-block;
          padding: 0;
          height: 20px;
          line-height: 20px;
          width: 20px;
          text-align: center;
          border-radius: 20px;
          background: @green;
          color: @white;
        }
        .dropdown-menu {
          left: auto;
          right: 0;
          li {
            line-height: 30px;
            color: @gray_66;
            padding: 0 15px;
            &:hover {
              color: @green;
            }
          }
        }
      }
    }
  }
  .head_title {
    font-size: 18px;
    font-weight: 600;
    color: @white;
    text-align: center;
    letter-spacing: 2px;
  }
  .menu_tree {
    a {
    }
  }
  .head_menu {
    text-align: center;
    position: relative;
    a {
      font-size: 16px;
      margin: 0 15px;
      padding: 0 5px;
      border-bottom: 2px solid @body_bg;
      transition: all 0.3s;
      &.active {
        color: @green;
        border-color: @green;
      }
    }
  }
  .head_menu_right {
    a {
      padding: 0 5px;
      line-height: 15px;
    }
    .line {
      display: inline-block;
      height: 15px;
      position: relative;
      top: 2px;
      margin: 0 10px;
      width: 1px;
      background: @gray_d6;
    }
  }
}
.body_modal {
  height: calc(
    100% - @foot_height - @head_title_height - @head_menu_height - 3px
  );
  border-top: 1px solid @gray_99;
  > .row {
    margin: 0;
  }
  > div {
    height: 100%;
    float: left;
  }
  .body_main {
    width: calc(100% - @body_right);
    > div {
      height: 100%;
      float: left;
    }
    .body_left {
      width: @body_right;
      border-right: 1px solid @gray_99;
    }
    .body_center {
      width: calc(100% - @body_right);
      background: @gray_22;
    }
  }
  .body_right {
    border-left: 1px solid @gray_99;
    width: @body_right;
    padding:10px 20px;
    position: relative;
    color:@white;
    .right_search{
        height:36px;
        line-height: 34px;
        padding-right:36px;
        border:1px solid @gray_99;
        position: relative;
        border-radius: 0.2em;
        overflow: hidden;
        color:@white;
        margin-top:5px;
        margin-bottom:20px;
        input{
            height:100%;
            padding:0 10px;
            width: 100%;
            border:0;
            background: none;
            &:focus{
                border:0;
            }
        }
        span{
            position: absolute;
            top:0;
            right:0;
            width: 36px;
            text-align: center;
            line-height: 34px;
            cursor: pointer;
        }
    }
    .typeBox{
      padding:5px 0;
      position: relative;
      select{
        border-color:@gray_99;
        text-align: left;
        background: none;
        position: relative;
        outline: none;
        color:@white;
        width: 100%;
        option{
          color:@gray_55;
        }
      }
    }
    .right_foot{
        position: absolute;
        width: 100%;
        bottom: 0;
        left:0;
        padding:0 20px;
        .operBox{
          text-align: center;
          padding:5px 0;
          button{
            width: 80%;
            margin-bottom:15px;
            background: @green;
          }
        }
        .item{
            padding:20px 0;
            margin:10px 0;
            border-top:1px solid @gray_99;
            position: relative;
            padding-left:60px;
            
            cursor: pointer;
            .iconfont{
                width: 50px;
                height:50px;
                border-radius: 50px;
                text-align: center;
                line-height: 50px;
                background: @green;
                color:@white;
                position: absolute;
                left:0;
                top:50%;
                transform: translateY(-50%);
            }
            .title{
                color:@white;
                min-height:40px;
            }
        }
    }
  }
}
.foot_modal {
  height: @foot_height;
  .footBtn{
    width: 50%;
    float:left;
    text-align: center;
    color:@white;
    line-height: @foot_height;
    background: @green;
    cursor: pointer;
    &.active{
      background: @green_dark;
    }
  }
}

/*环形进度样式*/
/* 画圆 */
.circle-bar {
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  > * {
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  .left-circle-bar,
  .right-circle-bar {
    height: 100%;
    width: 100%;
    background-color: lightcoral;
  }
  .mask {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
}

/*分页样式*/
.comPage{
    padding:20px;
    .pageBox{
        float: right;
    }
    span,a{
        float:left;
        cursor: pointer;
        margin:0 2px;
        user-select: none;
        &:hover{
            border-color:@green;
            color:@green;
        }
        &.text{
            padding:0 5px;
            color:@gray_e6;
            line-height: 28px;
        }
        &.active{
            border-color:@green;
            background: @green;
            color:@white;
        }
    }
    .spanBtn{
        min-width: 30px;
        height:30px;
        line-height: 28px;
        text-align: center;
        border-radius:0.2em;
        border:1px solid @gray_99;
        color:@gray_e6;
        padding:0 5px;
    }
    .rightBtn{
        transform: rotate(180deg);
    }
    a{
        width: 30px;
        height:30px;
        line-height: 28px;
        text-align: center;
        border-radius:0.2em;
        border:1px solid @gray_99;
        color:@gray_e6;
        &::before{
            margin-left:4px;
        }

    }
    input{
        border-radius:0.2em;
        margin:0 2px;
        float: left;
        border:1px solid @gray_99; 
        width: 70px;
        height:30px;
        line-height: 28px;
        text-align: center;
        padding:0 5px;
    }
}
/*switch按钮*/
.switch{
    display: inline-block;
    cursor: pointer;
    width: 40px;
    border-radius:20px;
    height:20px;
    background: @gray_99;
    position: relative;
    transition: all 0.3s;
    &::before{
        content:'';
        position: absolute;
        height:18px;
        width: 18px;
        border-radius:18px;
        top:1px;
        left:1px;
        background: @white;
        transition: all 0.3s;
        z-index: 2;
    }
    &.selected{
        background: @green;
        &::before{
            left:21px;
        }
    }
}